<template>
  <div class="movie-info">
    <div class="mask"></div>
    <div class="bg" :style="{ 'background-image': 'url(' + props.movie.img + ')' }"></div>
    <div class="detail">
      <div class="image-container">
        <img v-if="props.movie.img" :src="props.movie.img" :alt="props.movie.nm" class="movie-image" />
        <div v-else class="placeholder"></div>
      </div>
      <div class="right">
        <div class="nm line-ellipsis">{{ props.movie.nm }}</div>
        <div class="enm line-ellipsis"> {{ props.movie.enm }}</div>
        <div class="score-rate line-ellipsis">
          <span class="score">{{ props.movie.sc }} </span>
          <span class="rate">({{ props.movie.snum }}人评)</span>
        </div>
        <div class="category-version line-ellipsis">
          <span class="category">{{ props.movie.cat }}</span>
          <span class="version"></span>
        </div>
        <div class="district-duration line-ellipsis">
          <span class="district">{{ props.movie.src }} /</span>
          <span class="duration">{{ props.movie.dur }} 分钟</span>
        </div>
        <div class="pubDesc line-ellipsis">{{ props.movie.pubDesc }}</div>
      </div>
      <van-icon name="arrow" size="20" color="#fff" class="arrow" @click="gotoMovieDetail(movieId)" />
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const movieId = computed(() => route.params.movieId)

const props = defineProps({
  movie: {
    type: Object,
  }
});

const gotoMovieDetail = (movieId) => {
  router.push({ path: `/movie/${movieId}` })
};

</script>
<style scoped>
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.movie-info {
  position: relative;
  height: auto;
}

.movie-info .mask {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
}

.movie-info .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  filter: blur(60px);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .55;
}

.movie-info .detail {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 20px 10px;
}

.movie-info .detail img {
  width: 110px;
  height: 150px;
  display: block;
}

.movie-info .detail .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  height: 150px;
}

.movie-info .detail .right .nm {
  font-size: 20px;
  font-weight: 700;
}

.movie-info .detail .right .enm {
  font-size: 12px;
  opacity: .8;
}

.score-rate .score {
  font-size: 18px;
  color: #fc0;
  margin-right: 5px;
  font-weight: 700;
}

.score-rate .rate {
  opacity: .8;
}

.category-version .category {
  opacity: .8;
}

.district-duration {
  opacity: .8;
}

.pubDesc {
  opacity: .8;
}


.image-container {
  position: relative;
  width: 110px;
  height: 150px;
  /* 根据需要调整高度 */
}

.movie-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  /* 占位图背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #ccc;
}

.arrow {
  cursor: pointer;
}
</style>
